<template>
  <input type="text" v-model="name" /><button @click="find">搜索</button>
  <div v-for="item in arr" :key="item.id">
    {{ item.name }}---{{ item.age }}---<button @click="del(item.id)">
      删除
    </button>
  </div>
  <button @click="score">排序</button>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

export default {
  setup() {
    let name = ref("");
    let arr = reactive([
      { id: 1, name: "张三", age: "23" },
      { id: 2, name: "李四", age: "18" },
      { id: 3, name: "王五", age: "56" },
      { id: 4, name: "赵六", age: "44" },
    ]);
    let list = reactive([
      { id: 1, name: "张三", age: "23" },
      { id: 2, name: "李四", age: "18" },
      { id: 3, name: "王五", age: "56" },
      { id: 4, name: "赵六", age: "44" },
    ]);
    //排序
    function score() {
      arr.splice(0, arr.length);
      list
        .sort((a, b) => a.age - b.age)
        .forEach((item) => {
          arr.push(item);
        });
    }
    //删除
    function del(id) {
      var index = arr.findIndex((item) => item.id == id);
      console.log(index);
      arr.splice(index, 1);
    }
    //搜索
    function find() {
      arr.splice(0, arr.length);
      list.forEach((item) => {
        if (item.name == name.value) {
          arr.push(item);
        }
      });
    }
    return { arr, list, score, del, name, find };
  },
};
</script>
<style lang='less' scoped>
</style>